<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="1">-->
<!--        <div style="width:100%;height:300px;background-color: dodgerblue"></div>-->
<!--      </el-col>-->
<!--      <el-col :span="23">-->
<!--        <div style="width:100%;height:300px;background-color: red"></div>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-menu  router style="border: none":default-active="$route.path">
      <el-menu-item index="/">
        <template slot="title">
          <i class="el-icon-house"></i>
          <span>系统首页</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/Element">Element页面</el-menu-item>
      <el-submenu>
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>信息管理</span>
        </template>
        <el-menu-item >用户信息</el-menu-item>
      </el-submenu>
    </el-menu>

    <el-cow>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" alt="" >
          <div style="text-align: center">这个是一段很厉害的描述</div>
          <div style="color: red">价格</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" alt="" >
          <div style="text-align: center">这个是一段很厉害的描述</div>
          <div style="color: red">价格</div>
        </div>
      </el-col><el-col :span="6">
      <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
        <img style="width: 80%" src="@/assets/logo.png" alt="" >
        <div style="text-align: center">这个是一段很厉害的描述</div>
        <div style="color: red">价格</div>
      </div>
    </el-col><el-col :span="6">
      <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
        <img style="width: 80%" src="@/assets/logo.png" alt="" >
        <div style="text-align: center">这个是一段很厉害的描述</div>
        <div style="color: red">价格</div>
      </div>
    </el-col>
    </el-cow>

    <el-row>
      <el-col :span="24">
        <button>按钮</button>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>

        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="primary" plain round>主要按钮</el-button>
        <el-button circle icon="el-icon-edit" type="primary"></el-button>
        <el-button circle icon="el-icon-delete" type="danger"></el-button>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-rol>
        <el-input style="width: 200px" v-model="value" placeholder="请输入内容"></el-input>
        <el-input style="width: 200px" v-model="value2" placeholder="请输入内容" prefix-icon="el-iron-search"></el-input>
        <el-input clearable style="width: 200px" v-model="value2" placeholder="请输入内容" prefix-icon="el-iron-user"></el-input>
        <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>
        <el-input type="textarea" style="width: 200px" v-model="value1"></el-input>
      </el-rol>
    </el-row>

    <el-row style="margin:20px 0">
      <el-autocomplete style="width: 300px" placeholder="请输入内容，我来帮你猜一猜":fetch-suggestions="querySearch":trigger-on-focus="false" v-model="value3"></el-autocomplete>
    </el-row>

    <el-row>
      <el-select v-model="select" @change="changeSelect">
        <el-option value="香蕉"></el-option>
        <el-option value="菠萝"></el-option>
        <el-option value="橘子"></el-option>
      </el-select>
      <el-select v-model="select" @change="changeSelect" multiple>
        <el-option v-for="item in fruits":key="item.id":label="item.name":value="item.name"></el-option>
      </el-select>
      <el-select v-model="select1" @change="changeSelectUser" filterable>
        <el-option v-for="item in users":key="item.card":label="item.label":value="item.card"></el-option>
      </el-select>
    </el-row>

    <el-row>
      <el-radio-group v-model="radio" @change="selectRadio">
        <el-radio label="nan"></el-radio>
        <el-radio label="nü"></el-radio>
      </el-radio-group>
    </el-row>

    <el-checkbox-group v-model="checkList" @change="selectCheckBox">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
    </el-checkbox-group>

    <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择日期">
    </el-date-picker>
    <el-date-picker
        v-model="datetime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name:'Element',
  data(){
    return {
      value:'',
      value1:'',
      value2:'',
      value3:'',
      password:'',
      coffees:[{value:'1星巴克咖啡'},{value:'1雀巢咖啡'},{value:'2瑞幸咖啡'},{value:'3库迪咖啡'}],
      select:'',
      select1:'',
      fruits:[
        {name:'西瓜',id:1},
        {name:'苹果',id:2},
        {name:'草莓',id:3},
      ],
      users:[
        {label:'wyw',card:'123'},
        {label:'wyw1',card:'123'},
        {label:'wyw2',card:'123'},
      ],
      radio:'',
      checkList:'',
      date:'',
      datetime:''
    }
  },
  methods:{
    querySearch(query,cb){
      let result = query ? this.coffees.filter(v => v.value.includes(query)): this.coffees
      console.log(result)
      cb(this.coffees)
    },
    changeSelect(){
      console.log(this.select)
    },
    changeSelectUser(){
      console.log(this.select1)
    },
    selectRadio(){
      alert(this.radio)
    },
    selectCheckBox(){
      console.log(this.checklist)
    }
  }
}
</script>